<template>
  <div class="edit-logistics">
    <!-- 修改物流点信息 -->
    <el-form
      :model="infoForm"
      :rules="infoFormRules"
      ref="infoForm"
      label-width="160px"
    >
      <p class="title">更改物流方式</p>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="物流类型:" prop="logistics_type">
            <el-select
              v-model="infoForm.logistics_type"
              placeholder="请选择物流类型"
            >
              <el-option
                v-for="item in logisticsTypeList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <p class="title">开始物流信息</p>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="开始物流联系人:" prop="start_consignee">
            <el-input
              v-model="infoForm.start_consignee"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物流公司名称:" prop="company_name"
            ><el-input
              v-model="infoForm.company_name"
              placeholder="请输入内容"
              clearable
            ></el-input
          ></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开始物流点联系电话:" prop="start_mobile">
            <el-input
              v-model="infoForm.start_mobile"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开始物流点座机号:" prop="start_landline">
            <el-input
              v-model="infoForm.start_landline"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开始物流点省份:" prop="start_province">
            <el-input
              v-model="infoForm.start_province"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开始物流点城市:" prop="start_city">
            <el-input
              v-model="infoForm.start_city"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开始物流点区域:" prop="start_district">
            <el-input
              v-model="infoForm.start_district"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="开始物流点详细地址:" prop="start_address">
            <el-input
              v-model="infoForm.start_address"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <p class="title">结束物流信息</p>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="结束物流联系人:" prop="end_consignee">
            <el-input
              v-model="infoForm.end_consignee"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束物流点联系方式:" prop="end_mobile">
            <el-input
              v-model="infoForm.end_mobile"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束物流点座机号:" prop="end_landline">
            <el-input
              v-model="infoForm.end_landline"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束物流点省份:" prop="end_province">
            <el-input
              v-model="infoForm.end_province"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束物流点城市:" prop="end_city">
            <el-input
              v-model="infoForm.end_city"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束物流点区域:" prop="end_district">
            <el-input
              v-model="infoForm.end_district"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="结束物流点地址:" prop="end_address"
            ><el-input
              v-model="infoForm.end_address"
              placeholder="请输入内容"
              clearable
            ></el-input
          ></el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="padding-bottom: 20px">
      <el-button @click="cancel()">取 消</el-button>
      <el-button type="primary" @click="addFabricClick('infoForm')"
        >确 定</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  props: {
    layerid: {
      type: String,
      default: "",
    },
    id: {
      type: Number,
      default: 0,
    },
    info: Object,
  },
  data() {
    return {
      styleOptions: [],
      spaceOptions: [],
      infoForm: this.info,
      infoFormRules: {
        start_consignee: [{ required: true, message: "请输入内容" }],
        company_name: [{ required: true, message: "请输入内容" }],
        start_mobile: [{ required: true, message: "请输入内容" }],
        start_province: [{ required: true, message: "请输入内容" }],
        start_city: [{ required: true, message: "请输入内容" }],
        start_district: [{ required: true, message: "请输入内容" }],
        start_address: [{ required: true, message: "请输入内容" }],
        end_consignee: [{ required: true, message: "请输入内容" }],
        end_mobile: [{ required: true, message: "请输入内容" }],
        end_province: [{ required: true, message: "请输入内容" }],
        end_city: [{ required: true, message: "请输入内容" }],
        end_district: [{ required: true, message: "请输入内容" }],
        end_address: [{ required: true, message: "请输入内容" }],
        logistics_type: [{ required: true, message: "请输入内容" }],
      },
      logisticsTypeList: [
        {
          id: 1,
          title: "平台物流",
        },
        {
          id: 2,
          title: "商家物流",
        },
      ],
    };
  },
  methods: {
    addFabricClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http(this.$ApiList.UpdateOrderLogistics, this.infoForm).then(
            (res) => {
              this.$layer.msg(res.datas);
              this.$parent.init();
              this.cancel();
            }
          );
        } else {
          this.$layer.msg("请填写完整信息后提交");
        }
      });
    },
    cancel() {
      this.$layer.close(this.layerid);
    },
  },
  created() {},
};
</script>
<style lang="scss">
.edit-logistics {
  padding: 20px 20px;
}
</style>
